<template>
  <div class="production">
    <div class="btns">
      <!-- 检索框 -->
      <el-form :inline="true" :model="params" size="small">
        <el-form-item>
          <div class="block">
            <el-date-picker
              value-format="timestamp"
              v-model="time"
              type="datetimerange"
              :picker-options="pickerOptions"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              align="right"
            >
            </el-date-picker>
          </div>
        </el-form-item>
        <el-form-item>
          <el-select
            clearable
            v-model="params.type"
            placeholder="请选择类型"
          >
            <el-option label="收益" value="收益"></el-option>
            <el-option label="提现" value="提现"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-select clearable v-model="params.status" placeholder="请选择状态">
            <el-option label="正常" value="正常"></el-option>
            <el-option label="未审核" value="未审核"></el-option>
          </el-select>
        </el-form-item>
        <el-button
          type="primary"
          size="small"
          style="margin-right: 10px"
          @click="pageQueryCustomerAccount"
          icon="el-icon-search"
          >查询</el-button
        >
      </el-form>
    </div>
    <div class="content">
      <!-- 表格 -->
      <el-table v-loading="loading" :data="resData.list" style="width: 100%" size="small">
        <el-table-column label="编号" prop="id"></el-table-column>
        <el-table-column label="交易金额" prop="transferMoney"></el-table-column>
        <el-table-column
          v-if="resData.list && resData.list != ''"
          label="交易时间"
          prop=""
        >
          {{ resData.list[0].transferTime | fmtDate }}
        </el-table-column>
        <el-table-column label="交易类型" prop="type"></el-table-column>
        <el-table-column label="交易状态" prop="status">
          <template v-slot="scope">
            <el-tag
              v-if="scope.row.status == '通过'"
              size="mini"
              type="success"
              >{{ scope.row.status }}</el-tag
            >
            <el-tag v-else size="mini" type="success">{{
              scope.row.status
            }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="描述" prop="description"></el-table-column>
      </el-table>
      <!-- 分页 -->
      <el-pagination
        background
        align="center"
        layout="prev, pager, next, sizes"
        :total="resData.total"
        :page-size="params.pageSize"
        :current-page="params.page"
        @current-change="pageChangeHandler"
        :page-sizes="[5, 10, 15]"
        @size-change="pageSizeChangeHandler"
      >
      </el-pagination>
    </div>
  </div>
</template>
<script>
import requset from "@/utils/request";
import _ from "lodash";
export default {
  data() {
    return {
      loading:false,
      params: {
        page: 1,
        pageSize: 5,
      },
      time: null,
      resData: {},
      categories: [],
      formLabelWidth: "80px",
      pickerOptions: {
        shortcuts: [
          {
            text: "最近一周",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近一个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近三个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit("pick", [start, end]);
            },
          },
        ],
      },
    };
  },
  methods: {
    // 分页查询产品表格
    async pageQueryCustomerAccount() {
      this.loading = true;
      // 过滤数据将空字符串删除
      for (let key in this.params) {
        if (this.params[key] == "") {
          delete this.params[key];
        }
      }
      // 判断日期时间选择器是否有数据，有则将数据放入params中
      if (this.time) {
        this.params.beginTime = this.time[0];
        this.params.endTime = this.time[1];
      } else {
        delete this.params.beginTime;
        delete this.params.endTime;
      }
      let res = await requset.get("/account/pageQueryCustomerAccount", {
        params: this.params,
      });
      this.resData = res.data;
       this.loading = false;
    },
    // page改变事件
    pageChangeHandler(page) {
      this.params.page = page;
      this.pageQueryCustomerAccount();
    },
    // pageSize改变事件
    pageSizeChangeHandler(pageSize) {
      this.params.pageSize = pageSize;
      this.pageQueryCustomerAccount();
    },
  },
  created() {
    this.pageQueryCustomerAccount();
  },
};
</script>
<style>
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
.el-pagination{
  margin: 30px;
}
</style>
